<!-- 参展表单 -->
<template>
  <div class="exhibit">
    <div class="wCen">
      <div class="titlePage">
        <span class="titlePage_l">{{ $t("exhibit.t1") }}</span>
        <span class="titlePage_r" v-if="localeCn">APPLICATION FORM</span>
      </div>
      <div class="formBox">
        <el-form ref="refForm" :model="ruleForm" :rules="formValidate" label-width="0" label-position="top" size="medium">
          <el-row :gutter="50">
            <el-col :span="span">
              <el-form-item label="公司名称" prop="companyName" ref="companyName">
                <el-input v-model="ruleForm.companyName" :maxlength="100" clearable placeholder="请输入公司名称" />
              </el-form-item>
            </el-col>
            <el-col :span="span">
              <el-form-item label="英文名称" prop="companyNameEn" ref="companyNameEn">
                <el-input v-model="ruleForm.companyNameEn" :maxlength="100" clearable placeholder="请输入英文名称" />
              </el-form-item>
            </el-col>
            <el-col :span="span">
              <el-form-item label="展厅" prop="hall" ref="hall">
                <el-input v-model="ruleForm.hall" :maxlength="50" clearable placeholder="请输入展厅" />
              </el-form-item>
            </el-col>
            <el-col :span="span">
              <el-form-item label="意向面积" prop="area" ref="area">
                <el-input-number v-model="ruleForm.area" :maxlength="4" clearable :min="0" :max="9999" :controls="false" style="width: 100%" placeholder="请输入意向面积" />
              </el-form-item>
            </el-col>
            <el-col :span="span">
              <el-form-item label="展位类型" prop="standType" ref="standType">
                <el-select v-model="ruleForm.standType" placeholder="请选择展位类型" style="width: 100%">
                  <el-option :label="item.label" :value="item.value" v-for="(item, idx) in dictListBoothType" :key="idx"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="span">
              <el-form-item label="企业类型" prop="companyType" ref="companyType">
                <el-select v-model="ruleForm.companyType" placeholder="请选择企业类型" style="width: 100%">
                  <el-option :label="item.label" :value="item.value" v-for="(item, idx) in dictListCompanyType" :key="idx"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="公司地址" prop="address" ref="address">
                <el-input v-model="ruleForm.address" :maxlength="100" clearable placeholder="请输入公司地址" />
              </el-form-item>
            </el-col>
            <el-col :span="span">
              <el-form-item label="联系人" prop="name" ref="name">
                <el-input v-model="ruleForm.name" :maxlength="50" clearable placeholder="请输入联系人" />
              </el-form-item>
            </el-col>
            <el-col :span="span">
              <el-form-item label="公司职务" prop="position" ref="position">
                <el-input v-model="ruleForm.position" :maxlength="50" clearable placeholder="请输入公司职务" />
              </el-form-item>
            </el-col>
            <el-col :span="span">
              <el-form-item label="手机号" prop="mobile" ref="mobile">
                <el-input v-model.trim="ruleForm.mobile" :maxlength="20" clearable placeholder="请输入手机号" />
              </el-form-item>
            </el-col>
            <el-col :span="span">
              <el-form-item label="邮箱" prop="email" ref="email">
                <el-input v-model.trim="ruleForm.email" :maxlength="50" clearable placeholder="请输入邮箱" />
              </el-form-item>
            </el-col>
            <el-col :span="span">
              <el-form-item label="传真" prop="fax" ref="fax">
                <el-input v-model="ruleForm.fax" :maxlength="50" clearable placeholder="请输入传真" />
              </el-form-item>
            </el-col>
            <el-col :span="span">
              <el-form-item label="QQ" prop="qq" ref="qq">
                <el-input v-model.trim="ruleForm.qq" :maxlength="50" clearable placeholder="请输入QQ" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="公司网址" prop="website" ref="website">
                <el-input v-model.trim="ruleForm.website" :maxlength="50" clearable placeholder="请输入公司网址" />
              </el-form-item>
            </el-col>
          </el-row>
          <div class="btnBox">
            <span class="btn" @click="handleSubmit">提交</span>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { submit } from "@/api/booth";
import { validateQQ, validateMobile, validateEmail } from "@/libs/validate";
export default {
  props: {},
  dicts: ["stand_type", "company_type"],
  data() {
    return {
      ruleForm: {
        companyName: "",
        companyNameEn: "",
        hall: "",
        area: undefined,
        standType: "",
        companyType: "",
        address: "",
        name: "",
        position: "",
        mobile: "",
        email: "",
        fax: "",
        qq: "",
        website: "",
      },
      formValidate: {
        mobile: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
          {
            validator: validateMobile,
            trigger: "blur",
          },
        ],
        qq: [
          {
            required: false,
            message: "请输入QQ号码",
            trigger: "blur",
          },
          {
            validator: validateQQ,
            trigger: "blur",
          },
        ],
        email: [
          {
            required: true,
            message: "请输入邮箱",
            trigger: "blur",
          },
          {
            validator: validateEmail,
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {
    dictListBoothType() {
      return this.dict.type.stand_type.filter((item) => item.value < 2);
    },
    dictListCompanyType() {
      return this.dict.type.company_type;
    },
    span() {
      return this.isMobile ? 24 : 12;
    },
  },
  mounted() {},
  methods: {
    reset() {
      this.$refs.refForm.resetFields()
    },
    handleSubmit() {
      this.$refs.refForm.validate((valid, object) => {
        if (valid) {
          this.invoke(submit, this.ruleForm).then((res) => {
            if (res && res.code == 200) {
              this.jumpSuccess();
              this.reset()
            }
          });
        } else {
          this.$message({
            showClose: true,
            type: "warning",
            duration: 4000,
            message: "请确保所有必填/必选项都填选了",
          });
          let str = [];
          for (let key in object) {
            object[key].map((item) => {
              str.push(item.message);
            });
            let dom = this.$refs[Object.keys(object)[0]];
            if (Object.prototype.toString.call(dom) !== "[object Object]") {
              dom = dom[0];
              break; //结束语句并跳出语句，进行下个语句执行
            }
            // 定位代码
            dom.$el.scrollIntoView({
              block: "center",
              behavior: "smooth",
            });
          }
          // 页面提示未通过校验字段项，并以逗号分隔
          this.$message.error(str[0]);
        }
      });
    },
    jumpSuccess() {
      this.$message.success("您已报名成功，稍后将有工作人员与您取得联系");
    },
  },
};
</script>

<style lang="scss" scoped>
.exhibit {
  background-color: #fff;
  padding-top: 40px;

  .formBox {
    $h: 60px;
    $bg: #fbfdff;
    $border: #cdcdcd;
    :deep(.el) {
      &-form {
        &-item {
          &__label {
            font-size: 20px;
            color: #4f4f4f;
            padding-bottom: 20px;
          }
        }
      }
      &-input {
        font-size: 18px;
        &__inner {
          border-radius: 0;
          height: $h;
          background-color: $bg;
          border-color: $border;
          text-align: left;
        }
      }
    }
    .btnBox {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 100px 0 140px;
      .btn {
        width: 180px;
        height: 60px;
        background: #e35191;
        font-size: 30px;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        user-select: none;
      }
    }
  }
  @media (min-width: 1441px) and (max-width: 1750px) {
    @function scale($currentSize) {
      @return calc(#{$currentSize} * #{$global_scale_1600});
    }
    padding-top: scale(40px);

    .formBox {
      $h: scale(60px);
      :deep(.el) {
        &-form {
          &-item {
            &__label {
              font-size: scale(20px);
              padding-bottom: scale(20px);
            }
          }
        }
        &-input {
          font-size: scale(18px);
          &__inner {
            height: $h;
          }
        }
      }
      .btnBox {
        padding: scale(100px) 0 scale(140px);
        .btn {
          width: scale(180px);
          height: scale(60px);
          font-size: scale(30px);
        }
      }
    }
  }
  @media screen and (min-width: 1281px) and (max-width: 1440px) {
    @function scale($currentSize) {
      @return calc(#{$currentSize} * #{$global_scale_1440});
    }
    padding-top: scale(40px);

    .formBox {
      $h: scale(60px);
      :deep(.el) {
        &-form {
          &-item {
            &__label {
              font-size: scale(20px);
              padding-bottom: scale(20px);
            }
          }
        }
        &-input {
          font-size: scale(18px);
          &__inner {
            height: $h;
          }
        }
      }
      .btnBox {
        padding: scale(100px) 0 scale(140px);
        .btn {
          width: scale(180px);
          height: scale(60px);
          font-size: scale(30px);
        }
      }
    }
  }
  @media screen and (min-width: 768px) and (max-width: 1280px) {
    @function scale($currentSize) {
      @return calc(#{$currentSize} * #{$global_scale_1280});
    }
    padding-top: scale(40px);

    .formBox {
      $h: scale(60px);
      :deep(.el) {
        &-form {
          &-item {
            &__label {
              font-size: scale(20px);
              padding-bottom: scale(20px);
            }
          }
        }
        &-input {
          font-size: scale(18px);
          &__inner {
            height: $h;
          }
        }
      }
      .btnBox {
        padding: scale(100px) 0 scale(140px);
        .btn {
          width: scale(180px);
          height: scale(60px);
          font-size: scale(30px);
        }
      }
    }
  }
  @media (max-width: 767px) {
    @function scale($currentSize) {
      @return calc(#{$currentSize} * #{$global_scale_750});
    }
    padding-top: scale(40px);

    .formBox {
      $h: 40px;
      :deep(.el) {
        &-form {
          &-item {
            &__label {
              font-size: 14px;
              padding-bottom: 0px;
            }
          }
        }
        &-input {
          font-size: 14px;
          &__inner {
            height: $h;
          }
        }
      }
      .btnBox {
        padding: 50px 0 70px;
        .btn {
          width: 120px;
          height: 40px;
          font-size: 16px;
        }
      }
    }
  }
}
</style>
